<template>
<!-- loan/housingLoan/housingLoan.wxml -->
<view class="housing-loan">
  <view class="top">
    <view class="mon-supply">
      <view class="mon-supply-title">首月月供</view>
      <text class="money">{{firstMonth}}</text>
      <text>元</text>
    </view>
    <view class="loan-detail-info">
      <view class="total flex">
        <text class="loan-detail-info-title">公积金贷款总额</text>
        <text class="number">{{loanTotal}}万元</text>
      </view>
      <view class="year-interest flex">
        <text class="loan-detail-info-title">年利率</text>
        <text>{{yearInterestRate}}%</text>
      </view>
      <view class="year flex">
        <text class="loan-detail-info-title">公积金贷款年限</text>
        <text>{{year}}年</text>
      </view>
    </view>
    <view class="loan-cost">
      <view>累计利息 {{totalInterest}}</view>
      <view class="total-num">累计还款总额（元）{{totalRepayment}}</view>
    </view>
  </view>
  <view class="loan-detail">
    <view class="title">
      <text>期数</text>
      <text>月供（元）</text>
      <text>本金（元）</text>
      <text>利息（元）</text>
    </view>
    <view v-for="(item, index) in detailList" :key="index" class="loan-list">
      <text>第{{index + 1}}期</text>
      <text>{{item.monthMoney}}</text>
      <text>{{item.principal}}</text>
      <text>{{item.interest}}</text>
    </view>
  </view>
</view>
</template>

<script>
// loan/housingLoan/housingLoan.js
const loanUtil = require("../../../../utils/loanUtil.js"); // 贷款年限
// 贷款年限
let year = 30; // 贷款总额
// 贷款总额
let loanTotal;
const utils = require("../../../../utils/util.js");
let toggleCollection = true;

export default {
  data() {
    return {
      year: "0",
      // 贷款年限
      loanTotal: "0",
      // 贷款总额
      yearInterestRate: "0",
      // 年利率
      monthMoney: "",
      // 月供
      detailList: [],
      // 分期详情
      totalInterest: "",
      // 累计利息
      totalRepayment: "",
      // 累计还款总额
      firstMonth: "0.00",
      // 首月月供
      scroll: false
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //  收藏组件参数
    toggleCollection = true; // utils.colleation(this, "公积金计算器");

    let curPages = getCurrentPages();
    let length = curPages.length;

    if (options.year && options.loanTotal && options.type) {
      let year = options.year;
      let loanTotal = parseFloat(options.loanTotal) * 10000;
      this.setData({
        year,
        loanTotal: options.loanTotal
      });
      const methods = new loanUtil.LoanUtil("sz", this, year, loanTotal);
      if (options.type === "0") // 等额本金
        methods.equivalentPrincipal();else if (options.type === "1") // 等额本息
        methods.equivalentPrincipalAndInterest();
    }
  },
  methods: {
    onPageScroll() {
      if (toggleCollection) {
        this.setData({
          scroll: true
        });
        toggleCollection = false;
      }
    },

    closeCollection() {
      toggleCollection = false;
    },

    openCollection() {
      toggleCollection = true;
    }

  }
};
</script>
<style>
/* loan/housingLoan/housingLoan.wxss */

.housing-loan {
    padding-top: 34rpx;
    font-size: 26rpx;
  }
  
  .top {
    padding: 0 40rpx;
  }
  
  .money {
    margin-top: 10rpx;
    font-size: 50rpx;
    color: #136AEE;
  }
  
  .loan-detail-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 22rpx;
    border-bottom: 2rpx solid #F7F7F7;
  }
  
  .loan-detail-info-title {
    color: #8D8D8D;
    font-weight: 500;
  }
  
  .year {
    text-align: center;
  }
  
  .number {
    margin-top: 10rpx;
  }
  
  .loan-cost {
    color: #8D8D8D;
    margin-top: 24rpx;
  }
  
  .total-num {
    margin-top: 16rpx;
  }
  
  .title {
    background-color: #E8E8E8;
    margin-top: 24rpx;
    padding: 4rpx 0;
  }
  
  .loan-list {
    color: #8E8E8E;
    margin-top: 12rpx;
  }
  
  .title, .loan-list {
    display: flex;
    justify-content: space-between;
    text-align: center;
    overflow: hidden;
  }
  
  .title text, .loan-list text {
    width: 25%;
    /* flex: 1; */
    text-align: center;
  }
  .title text:first-child, .loan-list text:first-child {
    width: 18%;
  }
  .title text:last-child, .loan-list text:last-child {
    width: 21%;
  }
  
  .flex {
    display: flex;
    flex-direction: column;
  }
</style>